<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./../VUE/min.Vue
"></script>
<body>
        <!-- 
            Vue模板语法有两大类：
                    1.插值语法：
                            功能：用于解析标签体内容
                            写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
                    2.指令语法：
                            功能：用于解析标签(包括：标签属性，标签体内容，绑定事件...)
                            举例：v-bind:href="xxx"    或简写为  :href="xxx"   此时""中的值就不是字符串了
                                 而是表达式，或者说变量
                            备注：Vue中有很多的指令，且形式都是V-？？？   这里只是拿v:bind举个例子
         -->    

         <!-- 准备好一个容器 -->
         <div id="root">
             <h1>插值语法</h1>
             <h4>你好,{{3&lt;9 ? show : '我超级开心哦！'}}</h4>
             <hr>
             <h1>指令语法</h1>
             <p>我叫{{name}}</p>
             <p>我今年{{age}}岁</p>
             <a v-bind:href="school.name">这是我的学校:{{school.name}}</a>
             <a :href="school.url"> 这是我学校的地址:{{school.url}}</a>

         </div>

</body>
</html>
<script>
        // 创建一个Vue的实例
        new Vue({
            el:'#root',
            data:{
                show:'(其实一点也不好)',
                name:"张三",
                age:18,
                school:{
                    name:'超级天才幼稚园',
                    url:'翻斗大街39幢407室'
                }
            }
        })
</script>